<%--
  已废弃
  Author      : MadFrog
  Date        : xxxxx
  Description : Message创建页面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html lang="en">
<head>
    <title>新闻添加</title>
    <link href="https://cdn.bootcss.com/jquery-confirm/3.3.1/jquery-confirm.min.css" rel="stylesheet">
    <%--<link rel="stylesheet" type="text/css" href="${ctx}/resources/uploadify/uploadify.css"/>--%>
    <!--jQuery-Cropper-->
    <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">

    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/jquery/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/ueditor/ueditor.all.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.bootcss.com/jquery-confirm/3.3.1/jquery-confirm.min.js"></script>
    <%--<script type="text/javascript" charset="utf-8" type="text/javascript" src="${ctx}/resources/uploadify/jquery.uploadify.min.js"></script>--%>
    <!--jQuery-Cropper-->
    <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/resources/jquery-cropper/jquery-cropper.js"> </script>



    <style type="text/css">
        .center {
            margin:0 auto;
            width:40%
        }
        .uploadifyItem{
            /*height : 60px;*/
            /*width: 40px;*/
            float: left;
            margin: 10px;
        }
        .container {
            width: 100%;
            /*height : 60px;*/
            overflow: hidden;
            /*border: 1px solid #ccc;*/
        }
        img {
            max-width: 100%; /* This rule is very important, please do not ignore this! */
        }
    </style>
</head>
<body>
    <div class="center">
        <span>标题：</span>
        <input type="text" id="title" style="width: 40%;" />&nbsp;&nbsp;
        <span>类别：</span>
        <select id="category" style="width: 35%;">
            <option value="">-请选择-</option>
            <option value="WECHAT">微信</option>
            <option value="MAJOR">专业介绍</option>
            <option value="NEWS">系部新闻</option>
        </select>
        <br/>
        <br/>
        <%--<div class="container">--%>
            <%--<div class="uploadifyItem">--%>
                <%--<span>预览图片：</span>--%>
            <%--</div>--%>
            <%--<div class="uploadifyItem">--%>
                <%--<input type="file" id="preview" name="preview"/>--%>
            <%--</div>--%>
            <%--<div class="uploadifyItem">--%>
                <%--<input type="button" id="upload" value="上传文件"/>--%>
            <%--</div>--%>
            <%--<input type="text" id="previewPath" hidden="hidden" />--%>
        <%--</div>--%>
        <%--<div class="snapshoot">--%>
            <%--<img src="http://localhost:8888/api/resources/upload/images/20181210/original_1544455536583046870.jpg">--%>
        <%--</div>--%>
        <div class="img-container">
            <img id="image" src="http://localhost:8888/api/resources/upload/images/20181210/original_1544455536583046870.jpg" alt="Picture">
        </div>
        <br/>
        <div>
            <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
              <span class="fa fa-upload"></span>
            </span>
        </div>
        <br/>
        <div class="docs-preview clearfix">
            <div class="img-preview preview-lg"></div>
            <div class="img-preview preview-md"></div>
            <div class="img-preview preview-sm"></div>
            <div class="img-preview preview-xs"></div>
        </div>
        <br/>
        <div style="float: left">
            <span>摘要：</span>
        </div>
        <textarea id="sumary" style="height:60px;width: 100%;"></textarea><br/><br/>
        <span>内容：</span>
        <div id="editor" style="height:80%;"></div>
        <div id="message" hidden="hidden"></div>
        <div style="text-align: center">
            <button style="align-items: center" onclick="submit();">提交</button>
        </div>
    </div>
</body>
<script type="text/javascript">
    var ue = UE.getEditor('editor');
    $(document).ready(function(){
        $("#preview").uploadify({
            swf : "${ctx}/resources/uploadify/uploadify.swf",
            uploader : "${ctx}/admin/message/preview/upload",
            fileObjName : "preview",
            auto : false,
            fileSizeLimit : "90000KB",
            fileTypeExts : "*.jpg;*.png;",
            buttonText : "浏览本地图片",
            // formData : {
            //     "sid" : $("#sid").val()
            // },
            onUploadSuccess : function(file, data, response){
                console.log(data);
                $("#previewPath").val(data);
            }
        });
        $("#upload").click(function(){
            $("#preview").uploadify("upload", "*");
        });

        //
        var console = window.console || { log: function () {} };
        var URL = window.URL || window.webkitURL;
        var $snapshoot = $('#snapshoot');
        var options = {
            aspectRatio: 7 / 4,
            preview: '.img-preview',
            crop: function (e) {
                $dataX.val(Math.round(e.detail.x));
                $dataY.val(Math.round(e.detail.y));
                $dataHeight.val(Math.round(e.detail.height));
                $dataWidth.val(Math.round(e.detail.width));
                $dataRotate.val(e.detail.rotate);
                $dataScaleX.val(e.detail.scaleX);
                $dataScaleY.val(e.detail.scaleY);
            }
        };
        var originalImageURL = $snapshoot.attr('src');
        var uploadedImageName = 'cropped.jpg';
        var uploadedImageType = 'image/jpeg';
        var uploadedImageURL;
        $snapshoot.on({
            ready: function (e) {
                console.log(e.type);
            },
            cropstart: function (e) {
                console.log(e.type, e.detail.action);
            },
            cropmove: function (e) {
                console.log(e.type, e.detail.action);
            },
            cropend: function (e) {
                console.log(e.type, e.detail.action);
            },
            crop: function (e) {
                console.log(e.type);
            },
            zoom: function (e) {
                console.log(e.type, e.detail.ratio);
            }
        }).cropper(options);


        // Import image
        var $inputImage = $('#inputImage');
        if (URL) {
            $inputImage.change(function () {
                var files = this.files;
                var file;

                if (!$snapshoot.data('cropper')) {
                    return;
                }

                if (files && files.length) {
                    file = files[0];

                    if (/^image\/\w+$/.test(file.type)) {
                        uploadedImageName = file.name;
                        uploadedImageType = file.type;

                        if (uploadedImageURL) {
                            URL.revokeObjectURL(uploadedImageURL);
                        }

                        uploadedImageURL = URL.createObjectURL(file);
                        $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                        $inputImage.val('');
                    } else {
                        window.alert('Please choose an image file.');
                    }
                }
            });
        } else {
            $inputImage.prop('disabled', true).parent().addClass('disabled');
        }

    });

    function submit() {
        var title = $("#title").val().trim();
        if(title==null||title==undefined||title==""){
            $("#message").show().html("<h1 style='color: red'>标题不能为空<h1>");
            return;
        }
        var category = $("#category").val();
        if(category==null||category==undefined||category==""){
            $("#message").show().html("<h1 style='color: red'>类型不能为空<h1>");
            return;
        }
        var preview = $("#previewPath").val();
        if(preview==null||preview==undefined||preview==""){
            $("#message").show().html("<h1 style='color: red'>预览图片不能为空<h1>");
            return;
        }
        var summary = $("#sumary").val().trim();
        if(summary==null||summary==undefined||summary==""){
            $("#message").show().html("<h1 style='color: red'>摘要不能为空<h1>");
            return;
        }
        var content = ue.getContent().trim();
        if(content==null||content==undefined||content==""){
            $("#message").show().html("<h1 style='color: red'>内容不能为空<h1>");
            return;
        }
        var params = {};
        params.title = title;
        params.category = category;
        params.preview = preview;
        params.summary = summary;
        params.content = content;
        $.ajax({
            type : "post",
            url : "${ctx}/admin/message/add",
            data : params,
            dataType: "json",
            success: function (re) {
                if (true == re.success) {
                    promptSuccess();
                } else {
                    $("#message").show().html("<h1 style='color: red'>服务器错误，请联系管理员<h1>");
                }
            },
            error: function (re) {
                $("#message").show().html("<h1 style='color: red'>网络请求失败，请检查网络或地址<h1>");
            }
        });
        function promptSuccess() {
            $.confirm({
                title: '提交成功',
                content: '继续添加?',
                type: 'green',
                icon: 'glyphicon glyphicon-question-sign',
                buttons: {
                    ok: {
                        text: '继续',
                        btnClass: 'btn-primary',
                        action: function() {
                            $("#title").val("");
                            $("#previewPath").val("");
                            $("#sumary").val("");
                            ue.setContent("");
                        }
                    },
                    cancel: {
                        text: '关闭',
                        btnClass: 'btn-primary',
                        action: function() {
                            window.close();
                        }
                    }
                }
            });
        }
    }
</script>
</html>